Me pregunto por qué mi código no funciona:

• Cuando inicio la aplicación no funciona.
• Si cambio algo sobre la marcha, ¡está funcionando!

Parece ser algo así como cuando inicio el servidor, todos los datos aún no están cargados en Easy Peasy, por lo que la const no está definida, por lo que falla debido a TypeError.

 import { useEffect } from 'react'; //import { useParams } from 'react-router'; import { useStoreActions, useStoreState } from 'easy-peasy'; import Banner from './banner'; const Enrolment = () => { //const { idInstitution } = useParams(); /* CODE SPECIAL POUR EASY PEASY */ const enrolment = useStoreState(state => state.enrolmentModel.steps); const getEnrolmentForm = useStoreActions(actions => actions.enrolmentModel.getDataFromAPI); /* CODE REACT */ useEffect(() => { getEnrolmentForm(); // eslint-disable-next-line },[]); return ( <> <Banner /> {enrolment[1].steps[1][0].heading1.label} </> ) }; export default Enrolment;

Cualquier ayuda será realmente bienvenida:

 import { action, thunk } from "easy-peasy"; import axios from 'axios'; import { API_URL } from "../../config"; const enrolmentModel = { /* STATES */ steps: [], step: { label: "", elements : [], }, /* THUNKS pour effectuer des side effects comme les API*/ getDataFromAPI: thunk(async (actions) => { try { //appel à l'API de enrolment-back const { data } = await axios.get(`${API_URL}/steps/?idInstitution=123455`); actions.setDataFromAPI(data); } catch(e) { actions.setError(e); } }), /* ACTIONS a effectuer sur le model */ setError: action((state, error) => { state.error = error.message; console.log(error.message); }), setDataFromAPI: action((state, steps) => { state.steps = steps; }) } export default enrolmentModel;

Y el padre de Inscripción:

 import { BrowserRouter, Route, Switch } from 'react-router-dom'; import './App.css'; import Enrolment from './components/enrolment'; const App = () => { return ( <div className="App"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" /> <BrowserRouter> <Switch> <Route path='/enrolment/:idInstitution' exact component={Enrolment} /> </Switch> </BrowserRouter> </div> ); } export default App;